import * as THREE from 'three';
import { ColorEnum } from '../constants';
import { DynamicTexture } from '../components/core/DynamicTexture';
import * as commonfunc from "../mixins/viewCommonFun";
import {
    Box3,
    Mesh,
    Color,
    Scene,
    Group,
    Clock,
    MOUSE,
    Vector2,
    Vector3,
    Material,
    Object3D,
    Raycaster,
    BoxHelper,
    GridHelper,
    DoubleSide,
    LineSegments,
    PlaneGeometry,
    TextureLoader,
    WebGLRenderer,
    SphereGeometry,
    BufferGeometry,
    HemisphereLight,
    DirectionalLight,
    PCFSoftShadowMap,
    MeshBasicMaterial,
    LineBasicMaterial,
    MeshPhongMaterial,
    PerspectiveCamera,
    MeshMatcapMaterial,
    Float32BufferAttribute,
    OrthographicCamera,
    BoxGeometry,
    MeshLambertMaterial,
    ArrowHelper,
    ObjectLoader,
  } from "three";

export const initAxes=(arrowCanvas) =>{
    
    // Make simple orientation arrows and box - REF: http://jsfiddle.net/b97zd1a3/16/
    // arrowCanvas = document.querySelector('#arrowCanvas') as HTMLCanvasElement;
    // const arrowCanvas = document.createElement("canvas");
    arrowCanvas.style.width = "150px";
    arrowCanvas.style.height = "150px";
    arrowCanvas.style.position = "absolute";
    arrowCanvas.style.left = "80%";
    arrowCanvas.style.top = "400px";
    arrowCanvas.style.zIndex=200
  //  viewContainer.appendChild(arrowCanvas);
    const arrowRenderer = new WebGLRenderer({
      alpha: true,
      antialias: true,
      canvas: arrowCanvas,
    }); // clear
    arrowRenderer.setClearColor(ColorEnum.black, 0);
    arrowRenderer.setSize(
      arrowCanvas.clientWidth * window.devicePixelRatio,
      arrowCanvas.clientHeight * window.devicePixelRatio,
      false
    );
    const arrowScene = new Scene();
    const arrowCamera = new PerspectiveCamera(
      50,
      arrowCanvas.clientWidth / arrowCanvas.clientHeight,
      1,
      500
    );
    const perspectiveCamera = commonfunc.getPerspectiveCamera();
    if (perspectiveCamera) arrowCamera.up = perspectiveCamera.up; // important!
    const arrowPos = new Vector3(0, 0, 0);
    arrowScene.add(
      new ArrowHelper(new Vector3(1, 0, 0), arrowPos, 50, 0x7f2020, 15, 10)
    );
    arrowScene.add(
      new ArrowHelper(new Vector3(0, 1, 0), arrowPos, 50, 0x207f20, 15, 10)
    );
    arrowScene.add(
      new ArrowHelper(new Vector3(0, 0, 1), arrowPos, 50, 0x20207f, 15, 10)
    );
    arrowScene.add(
      new Mesh(
        new BoxGeometry(40, 40, 40),
        new MeshLambertMaterial({
          color: 0xaaaaaa,
          // flatShading: false
        })
      )
    );
    arrowScene.add(new HemisphereLight(0xc7e8ff, 0xffe3b3, 1.2));

    commonfunc.setArrowCanvas(arrowCanvas);
    commonfunc.setArrowRenderer(arrowRenderer);
    commonfunc.setArrowScene(arrowScene);
    commonfunc.setArrowCamera(arrowCamera);

    const userSetting = {
      fontStyle: "bold",
      fontFamily: "Arial",
      faceColor: "Gainsboro",
      edgeColor: "LightSlateGray",
      fontSizeScale: (res) => res / 2,
      resolution: 150,
      xPlusFaceProperty: {
        text: "X+",
        fontColor: "Tomato",
      },
      xMinusFaceProperty: {
        text: "X-",
        fontColor: "Tomato",
      },
      yPlusFaceProperty: {
        text: "Y+",
        fontColor: "SeaGreen",
      },
      yMinusFaceProperty: {
        text: "Y-",
        fontColor: "SeaGreen",
      },
      zPlusFaceProperty: {
        text: "Z+",
        fontColor: "DeepSkyBlue",
      },
      zMinusFaceProperty: {
        text: "Z-",
        fontColor: "DeepSkyBlue",
      },
    };
    const fontList = [
      {
        text: "X+",
        faceName: "xPlus",
        fontColor: "Tomato",
      },
      {
        text: "X-",
        faceName: "xMinus",
        fontColor: "Tomato",
      },
      {
        text: "Y+",
        faceName: "yPlus",
        fontColor: "DeepSkyBlue",
      },
      {
        text: "Y-",
        faceName: "yMinus",
        fontColor: "DeepSkyBlue",
      },
      {
        text: "Z+",
        faceName: "zPlus",
        fontColor: "SeaGreen",
      },
      {
        text: "Z-",
        faceName: "zMinus",
        fontColor: "SeaGreen",
      },
    ];
    const face_textures: DynamicTexture[] = [];

    function createFaceTextures() {
      for (let i = 0; i < 6; i++) {
        const dynamicTexture = new DynamicTexture(512, 512);
        dynamicTexture
          .clear("LightSlateGray")
          .updateFaceTexture(fontList[i].faceName, userSetting);
        face_textures.push(dynamicTexture);
      }
    }

    createFaceTextures();
    const materials = [
      new MeshBasicMaterial({ map: face_textures[0].texture }),
      new MeshBasicMaterial({ map: face_textures[1].texture }),
      new MeshBasicMaterial({ map: face_textures[2].texture }),
      new MeshBasicMaterial({ map: face_textures[3].texture }),
      new MeshBasicMaterial({ map: face_textures[4].texture }),
      new MeshBasicMaterial({ map: face_textures[5].texture }),
    ];
    arrowScene.add(new Mesh(new BoxGeometry(40, 40, 40), materials));

    const orthographicCamera = commonfunc.getOrthographicCamera();
    const orthographicControls = commonfunc.getOrthographicControls();
    const cameraType = commonfunc.getCameraType();
    const perspectiveControls = commonfunc.getPerspectiveControls();

    perspectiveControls?.update();
    orthographicControls?.update();
    if (arrowCamera) {
      if (cameraType === "Perspective" && perspectiveControls) {
        arrowCamera.position.copy(perspectiveCamera.position);
        arrowCamera.position.sub(perspectiveControls.target);
      }
      if (cameraType === "Orthographic" && orthographicControls) {
        arrowCamera.position.copy(orthographicCamera.position);
        arrowCamera.position.sub(orthographicControls.target);
      }
      arrowCamera.lookAt(arrowScene.position);
      arrowCamera.position.setLength(200);
    }
    // this.stats?.begin();
    if (cameraType === "Perspective" && perspectiveControls) {
      arrowRenderer?.render(arrowScene, perspectiveCamera);
    }
    if (cameraType === "Orthographic" && orthographicControls) {
      arrowRenderer?.render(arrowScene, orthographicCamera);
    }
    arrowRenderer?.render(arrowScene, arrowCamera);
    //  this.animate();
  }